<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            text-transform: uppercase;
            background: #ececec;
            color: #555;
            cursor: help;
            font-family: "Gill Sans", Impact, sans-serif;
            font-size: 20px;
            margin: 100px 75px 10px 75px;
            padding: 15px 20px;
            position: relative;
            text-align: center;
            width: 200px;
            -webkit-transform: translateZ(0);
            /* webkit flicker fix */
            -webkit-font-smoothing: antialiased;
            /* webkit text rendering fix */
        }

        .wrapper .tooltip {
            background: #1496bb;
            bottom: 100%;
            color: #fff;
            display: block;
            left: -25px;
            margin-bottom: 15px;
            opacity: 0;
            padding: 20px;
            pointer-events: none;
            position: absolute;
            width: 100%;
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            -ms-transform: translateY(10px);
            -o-transform: translateY(10px);
            transform: translateY(10px);
            -webkit-transition: all .25s ease-out;
            -moz-transition: all .25s ease-out;
            -ms-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
            -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        }

        /* This bridges the gap so you can mouse into the tooltip without it disappearing */
        .wrapper .tooltip:before {
            bottom: -20px;
            content: " ";
            display: block;
            height: 20px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        /* CSS Triangles - see Trevor's post */
        .wrapper .tooltip:after {
            border-left: solid transparent 10px;
            border-right: solid transparent 10px;
            border-top: solid #1496bb 10px;
            bottom: -10px;
            content: " ";
            height: 0;
            left: 50%;
            margin-left: -13px;
            position: absolute;
            width: 0;
        }

        .wrapper:hover .tooltip {
            opacity: 1;
            pointer-events: auto;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
        }

        /* IE can just show/hide with no transition */
        .lte8 .wrapper .tooltip {
            display: none;
        }

        .lte8 .wrapper:hover .tooltip {
            display: block;
        }
    </style>
</head>

<body>
    <!-- normally this stuff would be on the html element -->
    <!--[if lt IE 7]>  <div class="ie ie6 lte9 lte8 lte7"> <![endif]-->
    <!--[if IE 7]>     <div class="ie ie7 lte9 lte8 lte7"> <![endif]-->
    <!--[if IE 8]>     <div class="ie ie8 lte9 lte8"> <![endif]-->
    <!--[if IE 9]>     <div class="ie ie9 lte9"> <![endif]-->
    <!--[if gt IE 9]>  <div> <![endif]-->
    <!--[if !IE]><!-->
    <div>
        <!--<![endif]-->
        <div class="wrapper">
            I have a tooltip.
            <div class="tooltip">I am a tooltip!</div>
        </div>
    </div>
</body>

</html>